<%--
  - Author		:	최 재원(Jaewon Choi)
  - Date			:	2013.10.28
  - Description	:	
  --%>
<%@ page language="java" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/pages/includes/taglibs.jspf" %>
<%@ include file="/WEB-INF/pages/includes/variables.jspf" %>
<%@ include file="/WEB-INF/pages/includes/doctype.jspf" %>
<html>
	<head>
<%@ include file="/WEB-INF/pages/includes/metatags.jspf" %>		
		<title><fmt:message key="pages.title" /></title>	    
		<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0">
	    <meta name="apple-mobile-web-app-capable" content="yes" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="white">	
	    <link rel="stylesheet" href="<c:url value="${dirScripts}/event/jquery.mobile.structure-1.2.0.css" />" />  	      
	    <link rel="stylesheet" type="text/css" href="<c:url value="${dirScripts}/event/main.css" />" />    
	    <!-- phone -->
	    <link rel="stylesheet" media="screen and (min-width : 321px) and (orientation:landscape)" type="text/css" href="<c:url value="${dirScripts}/event/phone-landscape.css" />" />
	    <!-- tablet -->
	    <link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" type="text/css" href="<c:url value="${dirScripts}/event/tablet-portrait.css" />" />
	    <link rel="stylesheet" media="screen and (min-width: 900px) " type="text/css" href="<c:url value="${dirScripts}/event/tablet-landscape.css" />" />
		
	    <!-- jQuery --> 
	    <script src="<c:url value="${dirScripts}/event/jquery-1.8.2.min.js" />" type="text/javascript"></script> 
        <script src="<c:url value="${dirScripts}/event/jquery.mobile-1.2.0.min.js" />" type="text/javascript"></script>    	    
	    
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="generator" content="WebGUI 7.9.34" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<link href="<c:url value="${dirScripts}/event/photoswipe.css" />" rel="stylesheet" type="text/css" />
		<link href="<c:url value="${dirScripts}/event/contacts.css" />" rel="stylesheet" type="text/css" />
		<script src="<c:url value="${dirScripts}/event/swipe.min.js" />" type="text/javascript"></script>
		<script src="<c:url value="${dirScripts}/event/jquery.validate.min.js" />" type="text/javascript"></script>
		<script src="<c:url value="${dirScripts}/event/klass.min.js" />" type="text/javascript"></script>
		<script src="<c:url value="${dirScripts}/event/code.photoswipe.jquery-3.0.5.min.js" />" type="text/javascript"></script>
		<script src="<c:url value="${dirScripts}/event/main.js" />" type="text/javascript"></script>
		<meta http-equiv="Cache-Control" content="must-revalidate" />
		<style type="text/css">
			body {
				width: 100%;
				margin: 0;
				padding: 0;
				background: #F0F0EF;
			}
		</style>		
		<script type="text/javascript">
			function detail(src, link, eventIdx){
				$(".detailImg").attr("src", src);
				$(".detailImg").click(function(){goEvent(eventIdx, link);});
				//$('.rollingWrap').hide();
				//$('.listWrap').hide();
				$('.one-column').hide();
				//$("body").style("background", "#FFFFFF");
				$('.detailImg').show();				
			}
			
			function detail2(src, link, eventIdx){
				document.frm.event_idx.value = eventIdx;
				document.frm.detail_img.value = src;
				document.frm.link.value = link;
				document.frm.action="<c:url value="/event/appListDetail" />";
				document.frm.submit();
			}
			
			function goEvent(eventIdx, link){
				var data = '[{"cmd":"detailedEvent","eventIdx":'+eventIdx+',"actionTime":"now"}]';
				document.frm.data.value = data;
				
				$.ajax({
					type: "POST",
					url: "<c:url value="/API/v1_0/logUpload2" />",
					dataType: "json",
					async: false,
					data: $(document.frm).serialize(),
					success: function(data){
						if(data.returnCode == "000"){
							location.href = link;
						}else{
							alert(data.returnMessage);
						}
					},
					beforeSend: function(){
					},
					error: function(jqXHR, textStatus, errorThrown){
						alert("오류가 발생하였습니다.\n관리자에게 문의 바랍니다.");
						throw errorThrown;
					},
					complete: function(){
					}
				 });				
			}
		</script>
	</head>
	<body background="#F0F0EF">    
	<div id="root" data-role="page" class="home" >
	        <header data-role="header" >
	        </header>
	        <div id="content" data-role="content">
				<div id="layoutfa2e54fd816198a87229802388d36cc6" class="default">
					<div class="main-areas" style="overflow:hidden;">
						<div class="one-column" style="">
							<div id='collection-swipe-home' class='swipe simple-article'>
									<ul>
									<c:set var="check" value="0" />
										<c:forEach var="event" items="${eventList}"  varStatus="stat">
											<c:forEach var="eventFile" items="${eventFileList}">
												<c:if test="${event.idx eq eventFile.eventIdx}">
													<c:if test="${eventFile.fileType eq 'bigBanner'}">
														<c:set var="bigBanner" value="${eventFile.fileUrl }" />
													</c:if>
													<c:if test="${eventFile.fileType eq 'smallBanner'}">
														<c:set var="smallBanner" value="${eventFile.fileUrl }" />
													</c:if>
													<c:if test="${eventFile.fileType eq 'detail'}">
														<c:set var="detail" value="${eventFile.fileUrl }" />
													</c:if>
												</c:if>
											</c:forEach>
											<li style='display:<c:choose><c:when test="${stat.index eq 0}">block</c:when><c:otherwise>none</c:otherwise></c:choose>;'> 
										        <div class="article-image">
									  				<a href="javascript:detail2('${detail}','${event.linkUrl}','${event.idx}');">									  				
											        		<img alt="Block" src="${bigBanner}" class="fadeIn fadeIn-1s" />											        			    
													</a>
											    </div> 
									    	</li>
										</c:forEach>
									</ul>
							</div>		
							<c:forEach var="event" items="${eventList}" varStatus="stat">
								<c:forEach var="eventFile" items="${eventFileList}">
									<c:if test="${event.idx eq eventFile.eventIdx}">
										<c:if test="${eventFile.fileType eq 'bigBanner'}">
											<c:set var="bigBanner" value="${eventFile.fileUrl }" />
										</c:if>
										<c:if test="${eventFile.fileType eq 'smallBanner'}">
											<c:set var="smallBanner" value="${eventFile.fileUrl }" />
										</c:if>
										<c:if test="${eventFile.fileType eq 'detail'}">
											<c:set var="detail" value="${eventFile.fileUrl }" />
										</c:if>
									</c:if>
								</c:forEach>
								<c:choose>
									<c:when test="${event.emblem eq 'N'}"><c:url var="emblemImgUrl" value="${dirImages}/icon_event_new.png" /></c:when>
									<c:when test="${event.emblem eq 'E'}"><c:url var="emblemImgUrl" value="${dirImages}/icon_event_event.png" /></c:when>
									<c:when test="${event.emblem eq 'S'}"><c:url var="emblemImgUrl" value="${dirImages}/icon_event_special.png" /></c:when>
									<c:when test="${event.emblem eq 'H'}"><c:url var="emblemImgUrl" value="${dirImages}/icon_event_hot.png" /></c:when>
									<c:when test="${event.emblem eq 'X'}"><c:url var="emblemImgUrl" value="" /></c:when>
								</c:choose>							
								<div class="simple-article">
				   	    	        <div class="article-image">
					    	    	    <a href="javascript:detail2('${detail}','${event.linkUrl}','${event.idx}');">
					    	    	 	<img class="fadeIn fadeIn-1s" src="${smallBanner}" alt="Banner" />					    	    	 	
					    	    	 	<!-- <c:if test="${not empty emblemImgUrl && event.emblem ne 'X'}"><img class="emblem" src="${emblemImgUrl}"></c:if>-->
					    	    	    </a>
						    	    </div>
								</div>
							</c:forEach>	
						</div>
						<img id="detailImg" class="detailImg" src="" style="display: none;" />    		
					</div>								
				</div>	
	        </div>
	                   
	    </div>
	    <form name="frm" method="post" style="display: none;">
			<input type="hidden" name="device_id" value="${param.device_id}" />
			<input type="hidden" name="model" value="${param.model}" />
			<input type="hidden" name="os_ver" value="${param.os_ver}" />
			<input type="hidden" name="lcd_size" value="${param.lcd_size}" />
			<input type="hidden" name="store_type" value="${param.store_type}" />
			<input type="hidden" name="app_id" value="${param.app_id}" />
			<input type="hidden" name="app_ver" value="${param.app_ver}" />
			<input type="hidden" name="event_idx" />
			<input type="hidden" name="detail_img" />
			<input type="hidden" name="link" />
			<input type="hidden" name="data" />			
		</form>
	</body>
</html>